<template>
	<div class="login-container">
		<div class="login-logo">
			<span>{{ getThemeConfig.globalViceTitle }}</span>
		</div>
		<div class="login-content" :class="{ 'login-content-mobile': tabsActiveName === 'mobile' }">
			<div class="login-content-main">
				<h4 class="login-content-title">{{ getThemeConfig.globalTitle }}</h4>
				<div v-if="!isScan">
					<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
						<el-tab-pane label="账号密码登录" name="account" :disabled="tabsActiveName === 'account'">
							<transition name="el-zoom-in-center">
								<Account @sendLogin="login" @sendCaptChar="showCapt" v-show="isTabPaneShow" />
							</transition>
						</el-tab-pane>
						<!-- <el-tab-pane label="手机号登录" name="mobile" :disabled="tabsActiveName === 'mobile'">
							<transition name="el-zoom-in-center">
								<Mobile v-show="!isTabPaneShow" />
							</transition>
						</el-tab-pane>-->
					</el-tabs>
					<!-- <div class="mt10">
						<el-button type="text" size="small">第三方登录</el-button>
						<el-button type="text" size="small">友情链接</el-button>
					</div>-->
				</div>
				<Scan v-else />
				<div class="login-content-main-sacn" @click="isScan = !isScan">
					<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
					<div class="login-content-main-sacn-delta"></div>
				</div>
			</div>
		</div>
		<div class="login-copyright">
			<div class="mb5 login-copyright-company">版权所有：量子互联网络科技</div>
			<div class="login-copyright-msg">Copyright: LiangZiHuLian Software Technology</div>
		</div>
		<el-dialog
			v-model="showCaptcha"
			:show-close="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:append-to-body="true"
			title="人机校验"
			width="300px"
			ref="dialog"
		>
			<drag-verify-img-rotate
				width="260"
				ref="dragVerify"
				:imgsrc="img"
				v-model:isPassing="isPassing"
				:showTips="true"
				text="请按住滑块拖动将图片摆正"
				handlerIcon="el-icon-d-arrow-right"
				successIcon="el-icon-circle-check"
				:progressBarBg="pColor"
				@refresh="reimg"
				@passcallback="passFn"
				@passfail="unpassFn"
			></drag-verify-img-rotate>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, computed, onMounted, getCurrentInstance, nextTick, ref, defineComponent } from 'vue';
import Account from '/@/views/login/component/account.vue';
import Mobile from '/@/views/login/component/mobile.vue';
import Scan from '/@/views/login/component/scan.vue';
import { useStore } from '/@/store/index';
import { signIn } from '/@/api/platform/login/index';
import { ElMessage } from 'element-plus';
import { formatAxis } from '/@/utils/formatTime';
import { Session } from '/@/utils/storage';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useRoute, useRouter } from 'vue-router';
import { Md5 } from 'ts-md5';
import dragVerifyImgRotate from "/@/components/dragVerifyImgRotate.vue";
export default defineComponent({
	name: 'login',
	components: { Account, Mobile, Scan, dragVerifyImgRotate },
	setup() {
		const store = useStore();
		const state = reactive({
			pColor: store.state.themeConfig.themeConfig.primary,
			dragW: 1,
			reimg: "https://img0.baidu.com/it/u=3904827974,2084857142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			img: "https://img0.baidu.com/it/u=3904827974,2084857142&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			isPassing: false,
			showCaptcha: false,
			ruleForm: {
				account: "",
				password: "",
			},
			tabsActiveName: 'account',
			isTabPaneShow: true,
			isScan: false,
		});
		const dialog = ref()
		const dragVerify = ref()
		const { proxy } = getCurrentInstance() as any;
		const route = useRoute();
		const router = useRouter();
		const unpassFn = () => {
			ElMessage.error(`人机交互验证失败，请重试！`);
			dragVerify.value.reset();
			state.showCaptcha = false;
		}
		const passFn = () => {
			dragVerify.value.reset();
			state.showCaptcha = false;
			login();
		}
		nextTick(() => {
			state.dragW = dialog.value.width.replace("%", "") / 100 * document.documentElement.clientWidth - 40;
		})
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return store.state.themeConfig.themeConfig;
		});
		// 切换密码、手机登录
		const onTabsClick = () => {
			state.isTabPaneShow = !state.isTabPaneShow;
		};
		// 时间获取
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});
		const showCapt = (info: any) => {
			state.showCaptcha = info.show;
			state.ruleForm.account = info.account;
			state.ruleForm.password = Md5Password(info.password);
		}
		// 登录
		const login = () => {
			signIn({
				Account: state.ruleForm.account,
				Password: state.ruleForm.password,
			}).then(async (res: any) => {
				// 存储 token 到浏览器缓存
				Session.set('token', res.Extras.AccessToken);
				// 页面权限标识，对应路由 meta.auth，用于控制路由以及页面按钮的显示/隐藏
				const userInfos = {
					account: res.Extras.Account,
					nickname: res.Extras.NickName,
					avatar: res.Extras.Avatar,
					authPageList: res.Extras.Permissions,
					id: res.Extras.Id,
					tenantId: res.Extras.TenantId//租户ID 在此作为门店ID
				};
				console.log(userInfos);
				// 存储用户信息到浏览器缓存
				Session.set('userInfo', userInfos);
				// 1、请注意执行顺序(存储用户信息到vuex)
				store.dispatch('userInfos/setUserInfos', userInfos);
				await initBackEndControlRoutes();
				signInSuccess();
			}).catch((err) => { })
		};
		// 登录成功后的跳转
		const signInSuccess = () => {
			// 初始化登录成功时间问候语
			let currentTimeInfo = currentTime.value;
			state.showCaptcha = false;
			if (route.query?.redirect) {
				router.push({
					path: route.query?.redirect,
					query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
				});
			} else {
				router.push('/');
			}
			// 登录成功提示
			setTimeout(() => {
				ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
				// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
				proxy.mittBus.emit('onSignInClick');
			}, 300);
		};
		const Md5Password = (value: any) => {
			return Md5.hashStr(value);
		};
		return {
			onTabsClick,
			unpassFn,
			passFn,
			login,
			showCapt,
			getThemeConfig,
			dialog,
			dragVerify,
			...toRefs(state)
		};
	},
});
</script>
<style>
.wg-cap-wrap {
	width: 100%;
	height: 100%;
	background: #ffffff;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.wg-cap-wrap__header {
	height: 50px;
	width: 100%;
	font-size: 15px;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.wg-cap-wrap__header span {
	padding-right: 5px;
}
.wg-cap-wrap__header span em {
	padding: 0 3px;
	font-weight: bold;
	color: #3e7cff;
	font-style: normal;
}
.wg-cap-wrap__header .wg-cap-wrap__image {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	text-align: center;
	line-height: 1;
}
.wg-cap-wrap__header .wg-cap-wrap__thumb {
	min-width: 150px;
	text-align: center;
	line-height: 1;
	background: #f5f5f5;
	max-height: 100%;
}
.wg-cap-wrap__header .wg-cap-wrap__thumb.wg-cap-wrap__hidden {
	display: none;
}

.wg-cap-wrap__body {
	width: 300px;
	height: 300px;
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	background: #34383e;
	margin: auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
}
.wg-cap-wrap__body .wg-cap-wrap__picture {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	text-align: center;
}
.wg-cap-wrap__body .wg-cap-wrap__picture.wg-cap-wrap__hidden {
	display: none;
}
.wg-cap-wrap__body .wg-cap-wrap__loading {
	position: absolute;
	z-index: 9;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	margin-left: -34px;
	margin-top: -34px;
	line-height: 68px;
	text-align: center;
}
.wg-cap-wrap__body .wg-cap-wrap__dot {
	position: absolute;
	z-index: 10;
	width: 22px;
	height: 22px;
	color: #cedffe;
	background: #3e7cff;
	border: 2px solid #f7f9fb;
	line-height: 20px;
	text-align: center;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	cursor: default;
}

.wg-cap-wrap__footer {
	width: 100%;
	height: 40px;
	color: #34383e;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 15px;
}
.wg-cap-wrap__footer .wg-cap-wrap__ico {
	flex: 1;
}
.wg-cap-wrap__footer .wg-cap-wrap__ico img {
	width: 24px;
	height: 24px;
	color: #34383e;
	margin: 0 5px;
	cursor: pointer;
}
.wg-cap-wrap__footer .wg-cap-wrap__btn {
	width: 120px;
	height: 40px;
}
.wg-cap-wrap__footer .wg-cap-wrap__btn button {
	width: 100%;
	height: 40px;
	letter-spacing: 2px;
	text-align: center;
	padding: 9px 15px;
	font-size: 15px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	color: #fff;
	background-color: #409eff;
	border: 1px solid #409eff;
	-webkit-appearance: none;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: 0.1s;
	font-weight: 500;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.wg-cap-wrap__footer .wg-cap-wrap__btn button:hover {
	background: #66b1ff;
	border-color: #66b1ff;
	color: #fff;
}
</style>
<style scoped lang="scss">
.login-container {
	min-width: 800px;
	user-select: none;
	width: 100%;
	height: 100%;
	background: url("bg.png")
		no-repeat;
	background-size: 100% 100%;
	.login-logo {
		position: absolute;
		top: 30px;
		left: 50%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 20px;
		color:var(--color-whites); //var(--color-primary);
		letter-spacing: 2px;
		width: 90%;
		transform: translateX(-50%);
	}
	.login-content {
		width:350px;
		padding: 20px;
		position: absolute;
		top: 50%;
		left: 70%;
		transform: translate(-50%, -50%) translate3d(0, 0, 0);
		background-color: rgba(255, 255, 255, 0.99);
		border: 5px solid var(--color-primary-light-8);
		border-radius: 4px;
		transition: height 0.2s linear;
		overflow: hidden;
		height: 360px;
		z-index: 1;
		.login-content-main {
			margin: 0 auto;
			width: 80%;
			.login-content-title {
				color: #333;
				font-weight: 500;
				font-size: 22px;
				text-align: center;
				letter-spacing: 4px;
				margin: 15px 0 30px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
		}
		.login-content-main-sacn {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			overflow: hidden;
			cursor: pointer;
			transition: all ease 0.3s;
			&-delta {
				position: absolute;
				width: 35px;
				height: 70px;
				z-index: 2;
				top: 2px;
				right: 21px;
				background: var(--el-color-white);
				transform: rotate(-45deg);
			}
			&:hover {
				opacity: 1;
				transition: all ease 0.3s;
				color: var(--color-primary);
			}
			i {
				width: 47px;
				height: 50px;
				display: inline-block;
				font-size: 48px;
				position: absolute;
				right: 2px;
				top: -1px;
			}
		}
	}
	.login-content-mobile {
		height: 418px;
	}
	.login-copyright {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		text-align: center;
		color: var(--color-whites);
		font-size: 12px;
		opacity: 0.8;
		.login-copyright-company {
			white-space: nowrap;
		}
		.login-copyright-msg {
			@extend .login-copyright-company;
		}
	}
}
</style>
